<template>
  <div>
    <van-nav-bar left-text="返回" left-arrow @click-left="backPrePage">
    </van-nav-bar>

    <div class="my-card">
      <div class="my-flex">
        <p class="my-p">请上传身份</p>
        <p class="my-p2">查看样例&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
      </div>

      <div style="display: flex">
        <file-upload
            :uploadText="'上传身份证正面'"

            :uploadIcon="require('@/assets/iconfont/id_front.png')"
        />
        <file-upload
            :uploadText="'上传身份证反面'"
            :uploadIcon="require('@/assets/iconfont/id_front.png')"
        />
      </div>
      <van-divider
          class="my-divider"
          :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
      />
      <div class="my-id-card">
        <div class="my-flex">
          <p class="my-p">上传门诊病历、处方</p>
          <p class="my-p2">查看样例&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
        </div>
      </div>
      <small-file-upload
          :uploadIcon="require('@/assets/iconfont/small.png')"
      />
      <van-divider
          class="my-divider"
          :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
      />
      <div class="my-id-card">
        <div class="my-flex">
          <p class="my-p">上传票据/明细清单</p>
          <p class="my-p2">查看样例&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
        </div>
      </div>
      <small-file-upload
          :uploadIcon="require('@/assets/iconfont/small.png')"
      />
      <van-divider
          class="my-divider"
          :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
      />
      <div class="my-id-card">
        <div class="my-flex">
          <p class="my-p">上传费用明细清单</p>
          <p class="my-p2">查看样例&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
        </div>
      </div>
      <small-file-upload
          :uploadIcon="require('@/assets/iconfont/small.png')"
      />
      <van-divider
          class="my-divider"
          :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
      />
      <div class="my-id-card">
        <div class="my-flex">
          <p class="my-p">上传小结/检查报告</p>
          <p class="my-p2">查看样例&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
        </div>
      </div>
      <small-file-upload
          :uploadIcon="require('@/assets/iconfont/small.png')"
      />
      <van-divider
          class="my-divider"
          :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
      />
      <div class="my-id-card">
        <div class="my-flex">
          <p class="my-p">出院小结(出院记录)</p>
          <p class="my-p2">查看样例&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
        </div>
      </div>
      <small-file-upload
          :uploadIcon="require('@/assets/iconfont/small.png')"
      />
      <van-divider
          class="my-divider"
          :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
      />
      <div class="my-id-card">
        <div class="my-flex">
          <p class="my-p">上传检查报告</p>
          <p class="my-p2">查看样例&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
        </div>
      </div>
      <small-file-upload
          :uploadIcon="require('@/assets/iconfont/small.png')"
      />
      <van-divider
          class="my-divider"
          :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
      />
      <div class="my-id-card">
        <div class="my-flex">
          <p class="my-p">上传意外事故证明</p>
          <p class="my-p2">查看样例&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
        </div>
      </div>
      <small-file-upload
          :uploadIcon="require('@/assets/iconfont/small.png')"
      />
    </div>
    <van-button @click="submitClaimData(0)" type="info" size="large" class="my-botton">提交材料</van-button>
  </div>

</template>

<script>

import SmallFileUpload from "../../components/SmallFileUpload";
import FileUpload from "../../components/FileUpload";

export default {
  name: "ClaimData",
  components: {FileUpload, SmallFileUpload,},
  data() {
    return {
      flag: true,
      frontFileList: [],
      reverseFileList: []
    }
  },
  methods: {
    backPrePage() {
      this.$router.go(-1);
    },
  }
}
</script>


<style lang="less" scoped>
.my-p {
  text-align: left;
  font-size: 0.4rem;
  padding: 1% 0%;
  font-weight: bold;
  width: 100%;
}

.my-flex {
  display: flex;
}

.my-p2 {
  text-align: right;
  font-size: 0.4rem;
  color: #25a4bb;
  width: 100%;
}


.my-botton {
  height: 50px;
  width: 300px;
  margin-top: 7%;
  margin-left: 10%;
  margin-bottom: 2%;
  border-radius: 5px;
}

.my-card {
  margin-left: 18px;
}


.my-divider {
  margin-top: 2%;
  margin-bottom: 2%;
}
</style>
